<template>	   
	<el-dialog :visible.sync="visible" width="70%" :close-on-click-modal="false" :close-on-press-escape="false">
		<span slot="title">统一身份认证用户</span>
		<span slot="footer" class="dialog-footer">
			<el-button size="mini" @click="visible = false">取消</el-button>
			<el-button size="mini" type="primary" @click="submit">确定
				<i class="fa fa-save"></i>
			</el-button>
		</span>
		<el-container style="height:400px;">
			<el-aside style="overflow-y:scroll;">
				<el-tree :data="leftTrees" @node-click="selectNode" :accordion="true" :highlight-current="true">
					<span class="custom-tree-node" slot-scope="{node, data}">
						<span v-text="node.label"></span>
					</span>
				</el-tree>
			</el-aside>
			<el-main style="padding:0px 20px; overflow-y:hidden;">
				<el-form :inline="true">
					<el-form-item width="100">
						<el-input v-model="searchParams.name" size="mini" placeholder="学工号或姓名" />
					</el-form-item>
					<el-form-item>
						<el-button size="mini" type="primary" @click="search">查询
							<i class="el-icon-search"></i>
						</el-button>
					</el-form-item>
				</el-form>
				<el-table :data="list" :height="300" :max-height="300" 
					size="small" border highlight-current-row :id="wiseduUserTableId"
					style="width:100%">
					<el-table-column label="全选" width="50" :render-header="renderHeaderSelect">
						<template slot-scope="scope">
							<input type="checkbox" :checked="selectUserMap[scope.row.xgh] != null" @change="selectUser(scope.row)" />
						</template>
					</el-table-column>
					<el-table-column label="学工号" prop="xgh"></el-table-column>
					<el-table-column label="姓名" prop="xm"></el-table-column>
				</el-table>
				<el-pagination :current-page="searchParams.page" :page-size="searchParams.size"
					:page-sizes="[10, 20, 50, 100]" :page-count="totalPages" :total="totalElements"
					@current-change="searchParams.page = $event" 
					@size-change="searchParams.size = $event"
					layout="total, sizes, prev, pager, next, jumper">
				</el-pagination>
			</el-main>
			<el-aside>
				<el-tag v-for="(user, userId, index) in selectUserMap" :key="index" v-if="user != null" closable @close="selectUser(user)"
					style="margin-right:5px; margin-bottom:5px;">{{user.xm}}</el-tag>
			</el-aside>
		</el-container>
	</el-dialog>
</template>

<script>
import request from '@/utils/request';
import Common from '@/utils/Common';
import _ from 'lodash';
import { Loading } from 'element-ui';

let loading = null;
let uuid = Common.uuid;
let count = 0;
function load() {
	if(count == 0) {
		loading = Loading.service({
			target: document.getElementById(uuid),
			lock: true,
			text: '查询中...',
			spinner: 'el-icon-loading',
			background: 'rgba(0, 0, 0, 0.7)'
		});
		count++;
	}
}
function close() {
	if(count == 1) {
		loading.close();
		loading = null;
	}
	count--;
}

export default {
	data() {
		return {
			visible: false,
			wiseduUserTableId: uuid,
			types: [{
				dm: 'jzg', label: '教职工', departments: []
			}, {
				dm: 'bzks', label: '本科生', departments: []
			}, {
				dm: 'yjs', label: '研究生', departments: []
			}],
			searchParams: {
				page: 1,
				size: 20,
				type: '',
				dwdm: '',
				name: ''
			},
			list: [],
			totalPages: 0,
			totalElements: 0,
			selectUserMap: {}
		}
	},
	methods: {
		open() {
			this.selectUserMap = {};
			this.visible = true;
		},
		renderHeaderSelect() {
			return (
				<input type="checkbox" checked={this.isAllSelected} onChange={this.selectUserAll}/>		
			)
		},
		search() {
			if(!this.searchParams.type) {
				this.$message({
					message: '请选择类别后再查询',
					type: 'warning',
					showClose: true
				});
				return;
			}
			load();
			this.debounceSearch();
		},
		submit() {
			let xghs = [];
			for(let key in this.selectUserMap) {
				xghs.push(key);
			}
			this.$emit('submit', xghs);
			this.visible = false;
		},
		selectNode(data, node) {
			if(node.parent.parent == null) {
				this.searchParams.type = data.dm;
				this.searchParams.dwdm = null;
			} else {
				this.searchParams.dwdm = data.dm;
			}
		},
		selectUser(user) {
			if(this.selectUserMap[user.xgh] == null) {
				this.$set(this.selectUserMap, user.xgh, user);
			} else {
				this.$set(this.selectUserMap, user.xgh, null);
			}
		},
		selectUserAll() {
			let isAllSelected = this.isAllSelected;
			this.list.forEach(user => {
				this.$set(this.selectUserMap, user.xgh, isAllSelected ? null : user);
			});
		}
	},
	computed: {
		leftTrees() {
			let trees = [];
			this.types.forEach(type => {
				let tree = {
					dm: type.dm, label: type.label, children: []
				};
				type.departments.forEach(department => {
					tree.children.push({
						dm: department.dm, label: department.mc
					});
				});
				trees.push(tree);
			})
			return trees;
		},
		searchUrl() {
			let url = 'api/wisedu/jpa/zsj/' + this.searchParams.type + '/search';
			return url;
		},
		isAllSelected() {
			if(this.list.length == 0) {
				return false;
			}
			for(let i = 0; i < this.list.length; i++) {
				if(this.selectUserMap[this.list[i].xgh] == null) {
					return false;
				}
			}
			return true;
		}
	},
	watch: {
		'searchParams': {
			deep: true,
			handler(newVal, oldVal) {
				this.search();
			}
		}
	},
	created() {
		let self = this;
		self.types.forEach(type => {
			request({
				url: 'api/wisedu/jpa/zsj/' + type.dm + '/findGroupDwdm'
			}).then(data => {
				return request({
					url: 'api/wisedu/jpa/zxbz/zxbzDw/search',
					params: {
						page: 1,
						size: 10000,
						dms: data.list
					}
				});
			}).then(data => {
				let departments = data.list.filter(e => e.dm.length == 6).sort((e1, e2) => e1.mc.localeCompare(e2.mc, "zh"));
				type.departments = departments;
			}).catch(error => {
				console.log(error);
			});
		});
		self.debounceSearch = _.debounce(() => {
			let url = self.searchUrl;
			request({
				url: url,
				params: self.searchParams
			}).then(data => {
				self.list = data.list;
				self.totalPages = data.totalPages;
				self.totalElements = data.totalElements;
				if(self.totalPages < self.searchParams.page) {
					self.searchParams.page = 1;
				}
				close();
			}).catch(error => {
				self.$message({
					message: '查询失败：' + error.detail.msg,
					type: 'error',
					showClose: true
				});
				close();
			});
		}, 1000);
	}
}
</script>